@fontColor: #303030;
@navActiveColor: #5acaf8;
@fontName: 'Microsoft YaHei',SansSerif;
@mainContentWidth: 76.25em;

* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: @fontName;

// 覆盖 Bootstrap 对的影响
  p {
    margin: auto;
  }
}

body,html {
  width: 100%;
  box-sizing: border-box;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  background: white;
}

#header-bar {
  max-width: 1200px;
  margin: auto;
  height: 5.125em; // 82 % 16

  .logo {
    float: left;
    img {
      max-height: 100%;
      vertical-align: bottom;
    }
  }



  .nav {
    float: left;

    ul.items {
      height: 100%;

      // 纯 CSS 实现动态 label 背景 代码冗余太多
      &:hover  {
        li.active {
          background-color: transparent;

          a {
            color: @fontColor;
          }

          &:hover {
            a {
              color: white;
            }
          }
        }
      }

      li {
        transition: all 400ms;
        display: inline-block;
        float: left;
        height: 100%;
        line-height: 4; // 原来这也可以
        width: 8em; // 108 % 16 ??
        position: relative; // 为下拉菜单提供定位

        &.active {
          background-color: @navActiveColor;

          a {
            color: white;
          }
        }

        a {
          height: 100%;
          width: 100%;
          display: block;
          text-align: center;
          font-size: 1.3em; // 21 % 16
          text-decoration: none;
          color: @fontColor;
          font-family: @fontName;


          transition: all 300ms;
          &:hover {
            background-color: @navActiveColor;
            color: white;
          }
        }

       &.dropdown:hover ul {
         // 这个地方要重构
         opacity: 1;

         li {
           max-height: 3em;
         }
       }

        ul.dropdown {
          text-align: center;
          position: absolute;
          top:100%;
          box-shadow: 0 10px 10px 1px rgba(0, 0, 0, 0.2);
          transition: all 300ms;
          opacity: 0;
          overflow: hidden;
          height: auto;
          z-index: 1;

          li {
            transition: all 300ms;
            background: white;
            max-height: 0;
            line-height: 3em;
            border-top: solid 1px darkgray;
          }
        }

      }
    }

  }

  .drawer {
    display: none;
    float: right;
    height: 5.2em;
    width: 5.2em;
    flex-flow:column nowrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 300ms;

    &:hover {
      background: @navActiveColor;

      .line {
        background: white;
      }
    }

    .line {
      width: 50%;
      height: .4em;
      margin: 0.15em;
      background: @navActiveColor;
    }

  }

  @media screen and (max-width: 830px){



    .nav {
      opacity: 0;
      transition: all 400ms;
      z-index: -1;

      &.show{
        opacity: 1;
        z-index: 100;
      }

      position: fixed;
      height: 100%;
      width: 100%;
      background: rgba(15,15,15,0.8);

      ul.items {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;

        li {
          height: 3em;
          margin: 0;
          line-height: 2;

          a {
            background: transparent;
            color:#818181;
            font-weight: 600;
          }

          ul.dropdown {
            box-shadow: none;

            li {
              background: transparent;
              border: 0;

            }
          }
        }

      }



    }

    .drawer {
      display: flex;
      .line {
        transition: all 400ms;
      }

      &.active {
        position: fixed;
        right: 0;
        top: 0;
        z-index: 10000;

        .line:first-of-type {
          transform: translateY(150%) rotate(45deg);
          transform-origin: center ;
          margin: 0;
        }
        .line:nth-of-type(2) {
          opacity: 0;
        }
        .line:nth-of-type(3) {
          transform-origin: center ;
          transform: translateY(-150%) rotate(-45deg);
          margin: 0;
        }

      }
    }

    .logo {
      margin-left: 1em;
    }
  }
}

#main-content {
  max-width: 76.25em; // 1200 % 16
  margin: auto;

  .banner {
    min-width: 100%;

    //这个圆弧阴影要改成函数
    position: relative;
    overflow: hidden;

    &:before {
      z-index: 9999;
      content: "";
      width: 100%;
      border-radius: 50% 50%;
      height: 20px;
      box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.2);
      position: absolute;
      top: -20px;
    }

    img {
      max-width: 100%;
    }
  }

  .article {

    .header {
      max-width: 100%;
    }

    .section {
      margin-bottom:2em;

      .items {
        max-width: 100%;

        @media screen and (max-width: 900px) {
          li {
            flex-flow: row wrap;

            .aside,.digest {
              flex: 1 0 100%;
            }
          }
        }

        li {
          min-width: 100%;
          border-bottom: 2px dashed gainsboro;
          display: flex;
          justify-content: center;

          &:not(:first-of-type) {
            margin-top: 1em;
          }


          .aside {
            //max-width: 31.5%; // 383 % 1220
            text-align: center;
          }

          img {
            margin-left: 1em;
          }

          .digest {
            width: 63.5%; // 100% - 31.5%
            min-height: 12.125em; // 194 % 16
            //border: 1px solid #000;
            padding: 0em 1.5em; // 45 % 16 !
            position: relative;

            h1,p,.footer {
              font-family: @fontName;
              float: left;
            }

            h1 {
              font-size: 1.1em;
              font-weight: 600;
              margin-top: 0.1em;
              margin-bottom: 0.9em;

              a {
                color: @fontColor;
                width: 100%;
                text-decoration: none;
              }

            }

            p {
              font-size: 1em;
              font-weight: 300;
              padding-right: 1em;
              color: grey;
              height: 8em;

            }

            .footer {
              width: 100%;
              bottom: 1em;

              .date {
                color:gainsboro;
              }

              .detail {
                float: right;

                a {
                  text-decoration: none;
                  color: darkred;
                  font-family: cursive;
                }
              }

            }
          }

        }
      }
    }

    .pagenav-footer {

      ul {
        float: right;
      }

      li {
        float:left;
        border: 2px solid gainsboro;
        font-family: @fontName;
        color:@fontColor;
        font-weight: 800;
        cursor: pointer;
        padding: 0.2em;
        margin: 0.2em;

        &.more {
          border: 0;
        }

        &.active {
          background-color: @navActiveColor;
          border: 2px solid @navActiveColor;;
          color: white;
        }
      }


    }


  //  正文
    .article-main {
      min-width: 100%;
      border-bottom: 2px dashed gainsboro;

      .header {

        border-top: 2px dashed gainsboro;
        border-bottom: 2px dashed gainsboro;
        padding: 1.2em 0 1.1em;

        .title {

          text-align: center;
          h1 {

            color: darkred;
            font-size: 1.4em;

          }

          .details {
            margin-top: 1em;
            width: 100%;

            ul {
              list-style: none;
              display: flex;
              width: 80%;
              margin: 0 auto;

              li {
                margin: auto;
                color: @fontColor;

                form {
                  display: inline-block;

                  .active {
                    color: darkred;
                    font-weight: 600;
                  }

                  label {
                    margin: 0 0.2em;
                    cursor: pointer;
                  }

                  input {
                    display: none;
                  }
                }
              }
            }
          }
        }
      }

      .article-content {
        max-width: 100%;
        padding: 0 1em;

        .article-figure {
          text-align: center;
          img {
            max-width: 100%;
          }
        }

        p {
          margin: 1em 0;
          color: @fontColor;
          line-height: 1.5;
        }
      }


    }

    .article-nav-footer {
      padding-left: 2em;
      margin-bottom: -1em;

      li {
        margin-top: 1em;

        a {
          text-decoration: none;
          color: @fontColor;
          font-weight: 600;
        }
      }
    }

  }


  .corps-group {

      .section {
        .figures {
          display: flex;
          justify-content: space-around;
          flex-flow: row wrap;

          li {
            flex: 0 0 25%;
            text-align: center;

            img {
              vertical-align: bottom;
              min-width: 100%;
            }
          }
        }
      }

  }


}



#footer {
  max-width: @mainContentWidth;
  margin: 2em auto 0;
  //background: rgba(51, 110, 153, 0.09);;

  .details {
    border-top:1px solid #ccc;
    display: flex;
    height: 7em;
    flex-flow: row wrap;
    align-content: center;
    //background: @navActiveColor;
    position: relative;
    overflow: hidden;

    &:before {
      content: "";
      width: 100%;
      border-radius: 50% 50%;
      height: 20px;
      box-shadow: 0 0 8px 3px rgba(0, 0, 0, 0.2);
      position: absolute;
      top: -20px;
    }

    p {
      flex:100%;
      font-size: 0.9em;
      color: #868686;
      letter-spacing: 0.14em;
      text-align: center;

      &:first-of-type {
        text-indent: .5em;
        font-size: 1.1em;
        font-weight: 600;
        letter-spacing: 0.48em;
        text-shadow: 1px 1px 0px white;
      }

      &:nth-of-type(2) {
        letter-spacing: 0;
      }

    }
  }
}





// utils

// if children float in your block element, plz add this parent block a class "clearfix"
.clearfix::after {
  display: table;
  clear: both;
  content: "";
}
